<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Facile admin Documentation Template</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Facile admin&rdquo; Documentation by &ldquo;Lex Beelen&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Facile admin&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 11/23/2010<br>
					By: Lex Beelen<br>
					Email: <a href="mailto:lex@lexperts.nl">lex@lexperts.nl</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/lexperts">here</a>. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
		</ol>
		
		<hr>
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p>The main structure of the theme is based on three main areas, so it is pretty simple to edit. The hole Page is full screen.</p>
		<h4 id="htmlStructure"><strong>Navigation</strong></h4>
		<p>I have build accordian menu. This accordian menu starts from the div id slidebar. In the slidebar there is a id "#menu" to create wrapper between the menu items. For each main menu-item you start with the class ".menu-item". In the h3 tags you can start the main menu item. In menu-content you can start your sub menu items. If you want you can change the icons. There are lot of icons in the map "img->icon->famfamfam". All these icons you can use in the sub menu items. In the h3 tags you can define if you want to open or close the sub menu-items before the page is loaded. To define this you add the class "open" or "close" in your h3 tag.
		</p>

<strong>Complete new menu item</strong><br />

<img src="img/menuitem.gif" alt="menu" /><br />
<p>
&lt;div class=&quot;menu-item&quot;&gt;<br />
&lt;h3 class=&quot;open&quot;&gt;&lt;img src=&quot;img/icon/m-open.png&quot; alt=&quot;&quot; /&gt;Pages&lt;/h3&gt;<br />
&lt;div class=&quot;menu-overflow&quot;&gt;<br />
&lt;div class=&quot;menu-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_add.png&quot; alt=&quot;&quot; /&gt;Add page&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_edit.png&quot; alt=&quot;&quot; /&gt;Manage pages&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_delete.png&quot; alt=&quot;&quot; /&gt;Delete pages&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-overflow --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-item --&gt;<br /><br />
</p>

<strong>Open a menu</strong><br />

<img src="img/menuopen.gif" alt="menu" /><br />
<p>
&lt;h3 class=&quot;open&quot;&gt;&lt;img src=&quot;img/icon/m-open.png&quot; alt=&quot;&quot; /&gt;Pages&lt;/h3&gt;<br /><br />
</p>
<strong>Close a menu</strong><br />

<img src="img/menuclose.gif" alt="menu" /><br />
<p>
&lt;h3 class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/m-close.png&quot; alt=&quot;&quot; /&gt;Pages&lt;/h3&gt;
</p>	
<strong>Complete  menu</strong><br />
<img src="img/menucomplet.gif" alt="menu complete" /><br />
<p>
&lt;div id=&quot;slidebar&quot;&gt;<br />
&lt;div id=&quot;menu&quot;&gt;<br />
&lt;div class=&quot;menu-item&quot;&gt;<br />
&lt;h3 class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/m-close.png&quot; alt=&quot;&quot; /&gt;Dashboard&lt;/h3&gt;<br />
&lt;div class=&quot;menu-overflow&quot;&gt;<br />
&lt;div class=&quot;menu-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/chart_bar.png&quot; alt=&quot;&quot; /&gt;Statistics&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/server.png&quot; alt=&quot;&quot; /&gt;Server overview&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-overflow --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-item --&gt;<br />
&lt;div class=&quot;menu-item&quot;&gt;<br />
&lt;h3 class=&quot;open&quot;&gt;&lt;img src=&quot;img/icon/m-open.png&quot; alt=&quot;&quot; /&gt;Pages&lt;/h3&gt;<br />
&lt;div class=&quot;menu-overflow&quot;&gt;<br />
&lt;div class=&quot;menu-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_add.png&quot; alt=&quot;&quot; /&gt;Add page&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_edit.png&quot; alt=&quot;&quot; /&gt;Manage pages&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/page_delete.png&quot; alt=&quot;&quot; /&gt;Delete pages&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-overflow --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-item --&gt;<br />
&lt;div class=&quot;menu-item&quot;&gt;<br />
&lt;h3 class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/m-close.png&quot; alt=&quot;&quot; /&gt;News&lt;/h3&gt;<br />
&lt;div class=&quot;menu-overflow&quot; &gt;<br />
&lt;div class=&quot;menu-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/newspaper_add.png&quot; alt=&quot;&quot; /&gt;Add news&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/newspaper.png&quot; alt=&quot;&quot; /&gt;Manage news&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/newspaper_delete.png&quot; alt=&quot;&quot; /&gt;Delete news&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-overflow --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-item --&gt;<br />
&lt;div class=&quot;menu-item&quot;&gt;<br />
&lt;h3 class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/m-close.png&quot; alt=&quot;&quot; /&gt;Galleries&lt;/h3&gt;<br />
&lt;div class=&quot;menu-overflow&quot; &gt;<br />
&lt;div class=&quot;menu-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/image_add.png&quot; alt=&quot;&quot; /&gt;Add gallery&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/image_edit.png&quot; alt=&quot;&quot; /&gt;Manage gallery&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/icon/famfamfam/image_delete.png&quot; alt=&quot;&quot; /&gt;Delete gallery&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-overflow --&gt;<br />
&lt;/div&gt;&lt;!-- end div .menu-item --&gt;<br />
&lt;/div&gt;&lt;!-- end div #menu --&gt;<br />
&lt;/div&gt;&lt;!-- end div #slidebar --&gt;		
</p>
<hr>
<h4 id="htmlStructure"><strong>Content box</strong></h4>
<p>
For each content box you start. You have to create the following code:
</p>
<img src="img/contentbox.gif" alt="menu complete" />
<p>
&lt;div class=&quot;box-out&quot;&gt;<br />
&lt;div class=&quot;box-in&quot;&gt;<br />
&lt;div class=&quot;box-head&quot;&gt;&lt;h1&gt;Table box&lt;/h1&gt;&lt;/div&gt;<br />
&lt;div class=&quot;box-content&quot;&gt;<br />
&lt;!-- content items here --&gt;<br />
&lt;/div&gt;&lt;!-- end div .box-content --&gt;<br />
&lt;/div&gt;&lt;!-- end div .box-in --&gt;<br />
&lt;/div&gt;&lt;!-- end div .box-out --&gt;
</p>
<p>In the content-box you can add the following items:</p>
<ul class="alpha">
    <li>Notification</li>
    <li>Form</li>
    <li>Table</li>
    <li>Gallery </li>
    <li>Text</li>
    <li>Chart</li>
</ul>
<hr />		
<strong>Notification</strong><br /><br />	
<p>
You add the following code to create a notification in the content box:
</p>
<i>Error messages</i><br />		
<img src="img/errormessages.gif" alt="error messages" />
<p>
&lt;div class=&quot;notification error&quot;&gt;<br />
&lt;div class=&quot;messages&quot;&gt;Error messages &lt;div class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/close.png&quot; alt=&quot;close&quot; /&gt;&lt;/div&gt;&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- end div .notification error --&gt;
</p>
<i>Successfull messages</i><br />		
<img src="img/successmessages.gif" alt="error messages" />
<p>
&lt;div class=&quot;notification success&quot;&gt;<br />
&lt;div class=&quot;messages&quot;&gt;Successfull messages &lt;div class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/close.png&quot; alt=&quot;close&quot; /&gt;&lt;/div&gt;&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- end div .notification success --&gt;
</p>		
<i>Warning messages</i><br />		
<img src="img/warningmessages.gif" alt="error messages" />
<p>
&lt;div class=&quot;notification info&quot;&gt;<br />
&lt;div class=&quot;messages&quot;&gt;Info messages &lt;div class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/close.png&quot; alt=&quot;close&quot; /&gt;&lt;/div&gt;&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- end div .notification info --&gt;
</p>		
<i>Info messages</i><br />		
<img src="img/infomessages.gif" alt="error messages" />
<p>
&lt;div class=&quot;notification warning&quot;&gt;<br />
&lt;div class=&quot;messages&quot;&gt;Info messages &lt;div class=&quot;close&quot;&gt;&lt;img src=&quot;img/icon/close.png&quot; alt=&quot;close&quot; /&gt;&lt;/div&gt;&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- end div .notification warning --&gt;
</p>
<hr />
<strong>Form</strong><br />
<p>
You add the following code to start a form in the content box:<br />
</p>
<p>
&lt;div class=&quot;form&quot;&gt;<br />
&lt;form action=&quot;&quot;&gt;<br />
&lt;fieldset&gt;
&lt;!-- add your form items here here --&gt;<br />

&lt;/fieldset&gt;<br />
&lt;/form&gt;<br />
&lt;/div&gt;&lt;!-- end div .form --&gt;
</p>
<p>
You can add the following form items:
</p>
<i>Small input field</i><br />	
<img src="img/smallinputfield.gif" alt="small input field" />
<p>
&lt;label for=&quot;small_field&quot;&gt;Small input field&lt;/label&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;text small&quot; id=&quot;small_field&quot; /&gt;
</p>
<i>Multi select</i><br />	
<img src="img/multiselect.gif" alt="multi select" />
<p>
&lt;label for=&quot;multi_select&quot;&gt;Multi select&lt;/label&gt;<br />
&lt;div class=&quot;scrollbox&quot;&gt;<br />
&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;categorys[]&quot; id=&quot;multi_select&quot; /&gt;Category 1&lt;/div&gt;<br />
&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2&quot; name=&quot;categorys[]&quot; /&gt;Category 2&lt;/div&gt;<br />
&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;categorys[]&quot; /&gt;Category 3&lt;/div&gt;<br />
&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2&quot; name=&quot;categorys[]&quot; /&gt;Category 4&lt;/div&gt;<br />
&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;categorys[]&quot; /&gt;Category 5&lt;/div&gt;<br />
&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2&quot; name=&quot;categorys[]&quot; /&gt;Category 6&lt;/div&gt;<br />
&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;categorys[]&quot; /&gt;Category 7&lt;/div&gt;<br />
&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2&quot; name=&quot;categorys[]&quot; /&gt;Category 8&lt;/div&gt;<br />
&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;categorys[]&quot; /&gt;Category 9&lt;/div&gt;<br />
&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2&quot; name=&quot;categorys[]&quot; /&gt;Category 10&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- end div .scrollbox --&gt;
</p>
<i>Select field</i><br />	
<img src="img/selectfield.gif" alt="select field" />
<p>
&lt;label for=&quot;select_field&quot;&gt;Select field&lt;/label&gt;<br />
&lt;select id=&quot;select_field&quot; class=&quot;text&quot;&gt;<br />
&lt;option value=&quot;0&quot;&gt;Choose&lt;/option&gt;<br />
&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;<br />
&lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;<br />
&lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;<br />
&lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;<br />
&lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;<br />
&lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;<br />
&lt;option value=&quot;7&quot;&gt;Option 7&lt;/option&gt;<br />
&lt;option value=&quot;8&quot;&gt;Option 8&lt;/option&gt;<br />
&lt;option value=&quot;9&quot;&gt;Option 9&lt;/option&gt;<br />
&lt;option value=&quot;10&quot;&gt;Option 10&lt;/option&gt;<br />
&lt;/select&gt;
</p>
<i>Medium input field</i><br />	
<img src="img/mediuminputfield.gif" alt="medium input field" />
<p>
&lt;label for=&quot;medium_field&quot;&gt;Medium input field&lt;/label&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;text medium&quot; id=&quot;medium_field&quot; /&gt;
</p>
<i>Big input field</i><br />	
<img src="img/biginputfield.gif" alt="big input field" />
<p>
&lt;label for=&quot;big_field&quot;&gt;Big input field&lt;/label&gt;<br />
&lt;input type=&quot;text&quot; class=&quot;text big&quot; id=&quot;big_field&quot; /&gt;
</p>
<i>Radio options</i><br />	
<img src="img/radiooptions.gif" alt="radio options" />
<p>
&lt;label for=&quot;radio_option&quot;&gt;Radio options&lt;/label&gt;<br />
&lt;p&gt;&lt;input type=&quot;radio&quot; id=&quot;radio_option&quot; /&gt; Radio 1 &lt;input type=&quot;radio&quot; /&gt; Radio 2 &lt;input type=&quot;radio&quot; /&gt; Radio 3&lt;/p&gt;
</p>
<i>Upload field</i><br />	
<img src="img/uploadfield.gif" alt="upload field" />
<p>
&lt;label for=&quot;upload_field&quot;&gt;Upload field&lt;/label&gt;<br />
&lt;input type=&quot;file&quot; class=&quot;file&quot; id=&quot;upload_field&quot; /&gt;
</p>
<i>Textarea field</i><br />	
<img src="img/textareafield.gif" alt="textarea field" />
<p>
&lt;label for=&quot;textarea_field&quot;&gt;Textarea field&lt;/label&gt;<br />
&lt;textarea class=&quot;text textarea&quot; cols=&quot;80&quot; rows=&quot;20&quot; id=&quot;textarea_field&quot;&gt;&lt;/textarea&gt;
</p>
<i>Submit buttons</i><br />	
<img src="img/submitbutton.gif" alt="submit buttons" />
<p>
&lt;input type=&quot;submit&quot; value=&quot;button&quot; class=&quot;submit&quot; /&gt; &lt;input type=&quot;submit&quot; value=&quot;long button&quot; class=&quot;submit&quot; /&gt; &lt;input type=&quot;submit&quot; value=&quot;even longer button&quot; class=&quot;submit&quot; /&gt;
</p>
<hr />
<strong>Table</strong>
<p>
You add the following code to create a table in the content box:
</p>
<img src="img/table.gif" alt="table" />
<p>
&lt;div class=&quot;table&quot;&gt;<br />
&lt;table&gt;<br />
&lt;thead&gt;<br />
&lt;tr&gt;<br />
&lt;td class=&quot;checkbox&quot;&gt;&lt;div&gt;&lt;input type=&quot;checkbox&quot; class=&quot;check_all&quot; /&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div&gt;Title&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div&gt;Category&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div&gt;Modelnumber&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div&gt;Actions&lt;/div&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/thead&gt;<br />
&lt;tbody&gt;<br />
&lt;tr&gt;<br />
&lt;td class=&quot;checkbox&quot;&gt;&lt;div class=&quot;even&quot;&gt;&lt;input type=&quot;checkbox&quot; /&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;even&quot;&gt;Page title 1&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;even&quot;&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;Books&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;even&quot;&gt;dp123zx&lt;/div&gt;&lt;/td&gt;<br />
&lt;td class=&quot;action&quot;&gt;&lt;div class=&quot;even&quot;&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;Edit&lt;/a&gt; - &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;delete this item&quot;&gt;Delete&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class=&quot;checkbox&quot;&gt;&lt;div class=&quot;odd&quot;&gt;&lt;input type=&quot;checkbox&quot; /&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;odd&quot;&gt;Page title 2&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;odd&quot;&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;Books&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;div class=&quot;odd&quot;&gt;dp123zx&lt;/div&gt;&lt;/td&gt;<br />
&lt;td class=&quot;action&quot;&gt;&lt;div class=&quot;odd&quot;&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;Edit&lt;/a&gt; - &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;delete this item&quot;&gt;Delete&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/tbody&gt;<br />
&lt;/table&gt;<br />
&lt;/div&gt;&lt;!-- end div .table --&gt;
</p>
<p>The first table row is even and the second is odd. With the classes .even and .odd you can make the different background colours.</p>
<i>Table actions</i><br />	
<p> You can add table actions to the table class. You have to use the following code:</p>
<img src="img/tableactions.gif" alt="table" />
<p>&lt;div class=&quot;actions&quot;&gt;<br />
&lt;select class=&quot;applyfield&quot;&gt;<br />
&lt;option value=&quot;0&quot;&gt;Choose&lt;/option&gt;<br />
&lt;option value=&quot;1&quot;&gt; 1&lt;/option&gt;<br />
&lt;/select&gt;<br />
&lt;input type=&quot;submit&quot; class=&quot;apply&quot; value=&quot;apply&quot; /&gt;<br />
&lt;/div&gt;&lt;!-- end div .actions --&gt;</p>
<p>You have to at this code after the tag "&lt;/table&gt;"</p>
<hr />
<strong>Pagination</strong><br />
<p>You add the following code to create a pagination</p>
<img src="img/pagination.gif" alt="pagination" />
<p>
&lt;div class=&quot;pagination&quot;&gt;<br />
&lt;a href=&quot;#&quot;&gt;&amp;laquo; First&lt;/a&gt; <br />
&lt;a href=&quot;#&quot;&gt;&amp;laquo; Previous&lt;/a&gt; <br />
&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;<br />
&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt; <br />
&lt;a href=&quot;#&quot; class=&quot;select&quot;&gt;3&lt;/a&gt;<br />
&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;<br />
&lt;span class=&quot;gap&quot;&gt;...&lt;/span&gt;<br />
&lt;a href=&quot;#&quot;&gt;11&lt;/a&gt;<br />
&lt;a href=&quot;#&quot;&gt;12&lt;/a&gt;<br />
&lt;a href=&quot;#&quot;&gt;Next &amp;raquo;&lt;/a&gt;<br />
&lt;a href=&quot;#&quot;&gt;Last &amp;raquo;&lt;/a&gt;<br />
&lt;/div&gt;&lt;!-- end div .pagination --&gt;
</p>

<p>With the class .select you can make a select from the page-number. <br />
&lt;a href=&quot;#&quot; class=&quot;select&quot;&gt;3&lt;/a&gt;<br /><br />
With the following code you can create gap between the numbers:<br />
&lt;span class=&quot;gap&quot;&gt;...&lt;/span&gt;<br /></p>
<hr />
<strong>Gallery</strong>
<p>You add the following code to create a gallery</p>
<img src="img/gallery.gif" alt="gallery" />
<p>&lt;div class=&quot;gallery&quot;&gt;<br />
&lt;div class=&quot;images&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot; rel=&quot;img/gallery/preview/1.jpg&quot; class=&quot;preview&quot;&gt;&lt;img src=&quot;img/gallery/thumb/1.jpg&quot; alt=&quot;image 1&quot; /&gt;&lt;/a&gt;&lt;p&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;edit&lt;/a&gt; - &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;delete this item&quot;&gt;delete&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot; rel=&quot;img/gallery/preview/2.jpg&quot; class=&quot;preview&quot;&gt;&lt;img src=&quot;img/gallery/thumb/2.jpg&quot; alt=&quot;image 2&quot; /&gt;&lt;/a&gt;&lt;p&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;edit&lt;/a&gt; - &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;delete this item&quot;&gt;delete&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot; rel=&quot;img/gallery/preview/3.jpg&quot; class=&quot;preview&quot;&gt;&lt;img src=&quot;img/gallery/thumb/3.jpg&quot; alt=&quot;image 3&quot; /&gt;&lt;/a&gt;&lt;p&gt;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;edit&lt;/a&gt; - &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;delete this item&quot;&gt;delete&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;&lt;!-- end div .images --&gt;<br />
&lt;/div&gt;&lt;!-- end div .gallery --&gt;</p>
<i>Image preview</i><br />

<p>To create a preview of the gallery image. You have add the following code to your link tag.</p>
<img src="img/gallerypreviewimage.gif" alt="gallery image preview" /><br />
&lt;a href=&quot;#&quot; rel=&quot;img/gallery/preview/1.jpg&quot; class=&quot;preview&quot;&gt;&lt;img src=&quot;img/gallery/thumb/1.jpg&quot; alt=&quot;image 1&quot; /&gt;
<p>With "rel" you can tell where to find the preview of the image.</p>
<hr />
<strong>Text</strong>
<p>With the following code you can style your text in the content box.</p>
<img src="img/text.gif" alt="table" />
&lt;div class=&quot;text&quot;&gt;<br />
&lt;h1&gt;Heading H1&lt;/h1&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium. <br />
cinia, mauris at	 imperdiet venenatis, eros mauris accumsan est, at tincidunt purus ligula nec lectus. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Quisque aliquam&lt;/a&gt; aliquam nisi in mollis. &lt;/p&gt;<br />
&lt;hr /&gt;<br />
&lt;h2&gt;Heading H2&lt;/h2&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium. <br />
cinia, mauris at	 imperdiet venenatis, eros mauris accumsan est, at tincidunt purus ligula nec lectus. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Quisque aliquam&lt;/a&gt; aliquam nisi in mollis. &lt;/p&gt;<br />
&lt;hr /&gt;<br />
&lt;h3&gt;Heading H3&lt;/h3&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;nteger rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium. <br />
cinia, mauris at	 imperdiet venenatis, eros mauris accumsan est, at tincidunt purus ligula nec lectus. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Quisque aliquam&lt;/a&gt; aliquam nisi in mollis. &lt;/p&gt;<br />
&lt;hr /&gt;<br />
&lt;h4&gt;Heading H4&lt;/h4&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium.&lt;/p&gt;<br />
&lt;ol&gt;<br />
&lt;li&gt;List item 1&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List item 3&lt;/li&gt;<br />
&lt;li&gt;List item 4&lt;/li&gt;<br />
&lt;li&gt;List item 5&lt;/li&gt;<br />
&lt;/ol&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium.&lt;/p&gt;<br />
&lt;hr /&gt;<br />
&lt;h5&gt;Heading H5&lt;/h5&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum.&lt;/p&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;List item 1&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List item 3&lt;/li&gt;<br />
&lt;li&gt;List item 4&lt;/li&gt;<br />
&lt;li&gt;List item 5&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;p&gt;Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium. <br />
cinia, mauris at	 imperdiet venenatis, eros mauris accumsan est, at tincidunt purus ligula nec lectus. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Quisque aliquam&lt;/a&gt; aliquam nisi in mollis. &lt;/p&gt;<br />
&lt;hr /&gt;<br />
&lt;h6&gt;Heading H3&lt;/h6&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Integer rhoncus&lt;/a&gt;, mauris quis luctus sagittis, turpis felis gravida ipsum, id euismod lacus massa vitae augue. Duis interdum <br />
mperdiet. Curabi	tur consequat dignissim elementum. Etiam vitae ipsum ligula, nec consectetur nunc. Integer tristique nisi at lectus semper id faucibus ante pretium. <br />
cinia, mauris at	 imperdiet venenatis, eros mauris accumsan est, at tincidunt purus ligula nec lectus. &lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;go to themeforest.net&quot;&gt;Quisque aliquam&lt;/a&gt; aliquam nisi in mollis. &lt;/p&gt;<br />
&lt;/div&gt;&lt;!-- end div .text --&gt;<br /><br />
<hr />
<strong>Stats</strong>
<p>With the following code you can create stats box.</p>
&lt;div class=&quot;chart&quot;&gt;<br />
&lt;!-- add your own stats chart  here --&gt;<br />
&lt;/div&gt;&lt;!-- end div .chart --&gt;<br /><br />
<p>You can add you own stats chart here. For example google chart</p>
&lt;img src=&quot;http://chart.apis.google.com/chart?chxl=0:|Jan<br />|Feb|Mar|Jun|Jul|Aug|Sept|Oct|Nov|Dec|1:|0|25|50|<br />100&amp;chxs=0,2B2B2B,11,0,l,676767|1,2B2B2BFC,11,0,l,<br />676767&amp;chxt=x,y&amp;chs=640x300&amp;cht=lc&amp;chco=000BA5,<br />FF9900,FF0000&amp;chd=s:RPQMHLTQQUUTJIGIHJOU,<br />kljoohcfZZXYXSTQPWWZ,mqqt0wvttx0117720zvu&amp;chg=9,22,5,5&amp;chls=1|1|1&amp;chma=2&quot; alt=&quot;&quot; /&gt; <br /><br />
<p>To create your own google charts. You can use the <a href="http://code.google.com/apis/chart/docs/chart_wizard.html" target="_blank">google chart wizard</a></p>
<hr />
<h4 id="htmlStructure"><strong>Tooltips</strong></h4>
<p>You can create tooltips for each link.</p>
<img src="img/tooltip.gif" alt="table" />
<p>To create this tooltips you have too use the following code:</p>
&lt;a class=&quot;tooltip&quot; href=&quot;#&quot; title=&quot;edit this item&quot;&gt;<br /><br />
<p>With the "title" you can make your own messages. With the class ".tooltip" you say that it is a tooltip.</p>

<hr />

		<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
		<p>I'm using three CSS files in this theme. The first one is a generic reset file (css/reset.css). Many browser interpret the default behavior of html elements differently. By using a general reset CSS file (css/reset.css), we can work round this.</p> 

		<p>The second file (css/style.css) contains all of the specific stylings for the page.</p>  
		
		<p>The third file (css/ie.css) makes the site Internet Explorer proof.</p>  
		
		<p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p> 

		<hr>
		
		<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports three Javascript files.</p>
		
		<ol>
			<li>jQuery (jquery-1.4.4.min.js)</li>
			<li>jQuery Tipsy Plugin (jquery-tipsy.js)</li>
			<li>jQuery Custom (jquery-custom.js)</li>
		</ol>
		<hr>
				
		<h3 id="credits"><strong>D) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		<p>I've used the following images, icons or other files as listed.
		
		<ul>
			<li>Mark James - <a href="http://www.famfamfam.com/lab/icons/silk/" target="_blank" />http://www.famfamfam.com/lab/icons/silk/</a></li>
			<li>Jason Frame - <a href="http://onehackoranother.com/projects/jquery/tipsy/" target="_blank" />http://onehackoranother.com/projects/jquery/tipsy/</a></li>
		</ul>
		
		<hr>
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>Lex Beelen</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>